<template>
  <div class="drawer-box">
    <el-drawer v-model="visible" :direction="direction" :size="size">
      <template #header>
        <div class="header-title">
          <slot name="header"></slot>
        </div>
      </template>
      <div class="drawer-body">
        <slot name="default"> </slot>
      </div>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import type { DrawerProps } from 'element-plus';
import { ref } from 'vue';
defineOptions({
  name: 'DwDrawer',
});
defineProps({
  size: {
    type: Number,
    default: 1024,
  },
});
const direction = ref<DrawerProps['direction']>('rtl');
const visible = ref<boolean>(false);
const show = () => {
  visible.value = true;
};
defineExpose({
  show,
});
</script>
<style lang="scss">
.drawer-box {
  :deep(.el-drawer__header) {
    margin: 0;
    padding: 0 20px;
  }
  .header-title {
    height: 50px;
    line-height: 50px;
  }
  .drawer-body {
    width: 100%;
    height: 100%;
    border-top: 1px solid var(--el-border-color);
  }
}
</style>
